/**
 * 学习目标：使用Ref获取dom元素、组件实例对象 - 与vue中 ref 作用类似
 * 作用：ref获取dom元素、组件实例对象
 * 1. 通过 React.createRef() 创建 ref 对象
 * 2. 通过 标签上的ref属性，绑定好变量
 * 3. ref对象的.current 获取到真实 组件实例/DOM对象
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {};
  // 也可以写在组件内，那么就是组件的变量，通过 this.inputRef 访问
  // 创建多个也没问题
  inputRef = React.createRef();
  childRef = React.createRef();

  handleClickChild = () => {
    console.log('childRef.current -----> ', this.childRef.current.state.count);
    this.childRef.current.handleClick();
  };
  render() {
    return (
      <div>
        {/* 2. 通过 标签上的ref属性，绑定好变量 */}
        <Child ref={this.childRef}></Child>
        <button onClick={this.handleClickChild}>点我访问子组件Child</button>
      </div>
    );
  }
}

class Child extends React.Component {
  state = {
    count: 100,
  };

  handleClick = () => {
    alert(this.state.count);
  };

  render() {
    return <h1>我是Child = {this.state.count}</h1>;
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
